<template>
  <div>
    <smart-table
      :formList="formList"
      :formData="formData"
      :title="title"
      :selectUrl="selectUrl"
      :updateUrl="updateUrl"
      :selectMethodExtend="addPostId"
      :tableColumns="tableColumns"
      :formButtonCtl="formButtonCtl"
      :maxOptionButtonCount="8"
      :formRules="resumeFormRules">
      <template slot="table-button" slot-scope="row">
        <el-button type="success" icon="el-icon-view" @click="showResume(row.row)">查看简历</el-button>
      </template>
      <template slot="dialog-custom-form">
        <!-- 动态列表 -->
        <el-dialog :visible.sync="viewDialog" title="查看简历" width="80%" center>
          <el-card v-for="item in resumeForm" :key="item.value">
            <template v-if="'type' in item && item.type == 'list'"
              ><el-descriptions
                v-for="(lItem, index) in resumeData[item.value]"
                :key="lItem.id"
                border
                :title="`${item.title}${index + 1}`"
                :column="'column' in item && item.column">
                <el-descriptions-item v-for="cItem in item.children" :key="cItem.value" :label="cItem.label">
                  <span class="resume-text">{{ lItem[cItem.value] }}</span>
                </el-descriptions-item>
              </el-descriptions></template
            >
            <!-- 常规 -->
            <el-descriptions v-else :title="item.title" :column="'column' in item && item.column" border>
              <el-descriptions-item v-for="cItem in item.children" :key="cItem.value" :label="cItem.label">
                <template v-if="'type' in cItem && cItem.type == 'image'">
                  <!-- 图片 -->
                  <el-image
                    :src="downloadFile(resumeData[item.value][cItem.value])"
                    class="resume-image"
                    :preview-src-list="[downloadFile(resumeData[item.value][cItem.value])]"></el-image>
                </template>
                <!-- 附件下载 -->
                <template v-else-if="'type' in cItem && cItem.type == 'file'">
                  <el-link :underline="false" :href="downloadFile(resumeData[item.value][cItem.value])" type="success" icon="el-icon-download"
                    >点击下载</el-link
                  >
                </template>
                <span v-else class="resume-text">{{ resumeData[item.value][cItem.value] }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="viewDialog = false">关闭</el-button>
          </div>
        </el-dialog>
      </template>
    </smart-table>
  </div>
</template>

<script>
import { downloadFile } from '@/utils/file'
import { mapGetters } from 'vuex'
export default {
  name: 'User',
  computed: {
    ...mapGetters(['id']),
  },
  data() {
    return {
      title: '简历',
      viewDialog: false,
      resumeData: {
        resume: {},
        workExperiences: [],
        educationExperiences: [],
        projectExperiences: [],
      },
      formList: [
        {
          title: '面试时间',
          name: 'interviewTime',
          type: 'time',
          timeType: 'datetime',
          format: 'yyyy 年 MM 月 dd 日 HH 时 mm 分 ss 秒',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          hidden: {
            header: true,
          },
        },
        {
          title: '姓名',
          name: 'username',
          hidden: {
            updateDialog: true,
          },
        },
        {
          title: '状态',
          name: 'status',
          type: 'select',
          optionList: [],
          showValue: false,
        },
      ],
      formData: {
        current: 1,
        size: 10,
        postId: '',
      },
      selectUrl: 'resume/lookResumeList',
      updateUrl: 'resume/updateSubmitResume',
      tableColumns: [
        {
          title: '头像',
          name: 'avatar',
          type: 'image',
        },
        {
          title: '名称',
          name: 'name',
        },
        {
          title: '姓名',
          name: 'username',
        },
        {
          title: '性别',
          name: 'sex',
          type: 'tag',
          width: 90,
          tagStyle: {},
          tipMap: {},
          filters: [],
        },
        {
          title: '年龄',
          name: 'age',
          width: 90,
          suffix: '岁',
        },
        {
          title: '手机号',
          name: 'phone',
        },
        {
          title: '地址',
          name: 'address',
        },
        {
          title: '状态',
          name: 'status',
          type: 'tag',
          width: 90,
          tagStyle: {},
          tipMap: {},
          filters: [],
        },
        {
          title: '创建时间',
          name: 'createTime',
        },
        {
          title: '修改时间',
          name: 'updateTime',
        },
      ],
      // 详情
      resumeForm: [
        {
          title: '基本信息',
          value: 'resume',
          column: 2,
          children: [
            {
              label: '姓名',
              value: 'username',
            },
            {
              label: '头像',
              value: 'avatar',
              type: 'image',
            },
            {
              label: '性别',
              value: 'sexName',
            },
            {
              label: '年龄',
              value: 'age',
            },
            {
              label: '生日',
              value: 'birthday',
            },
            {
              label: '手机号',
              value: 'phone',
            },
            {
              label: '邮箱',
              value: 'email',
            },
            {
              label: '住址',
              value: 'address',
            },
            {
              label: '身份证号',
              value: 'identity',
            },
          ],
        },

        {
          title: '教育经历',
          value: 'educationExperiences',
          type: 'list',
          column: 2,
          children: [
            {
              label: '开始时间',
              value: 'start',
            },
            {
              label: '结束时间',
              value: 'end',
            },
            {
              label: '学校',
              value: 'school',
            },
            {
              label: '专业',
              value: 'major',
            },
            {
              label: '学历',
              value: 'degreeName',
            },
          ],
        },
        {
          title: '工作经历',
          value: 'workExperiences',
          type: 'list',
          column: 2,
          children: [
            {
              label: '开始时间',
              value: 'start',
            },
            {
              label: '结束时间',
              value: 'end',
            },
            {
              label: '公司名称',
              value: 'company',
            },
            {
              label: '岗位职责',
              value: 'duty',
            },
          ],
        },
        {
          title: '项目经历',
          value: 'projectExperiences',
          type: 'list',
          column: 2,
          children: [
            {
              label: '开始时间',
              value: 'start',
            },
            {
              label: '结束时间',
              value: 'end',
            },
            {
              label: '项目名称',
              value: 'name',
            },
            {
              label: '项目角色',
              value: 'role',
            },
            {
              label: '项目描述',
              value: 'description',
            },
          ],
        },
        {
          title: '其他',
          value: 'resume',
          column: 1,
          children: [
            {
              label: '专业技能',
              value: 'skill',
            },
            {
              label: '自我评价',
              value: 'advantage',
            },
            {
              label: '附件',
              value: 'fileId',
              type: 'file',
            },
          ],
        },
      ],
      // 表单校验
      resumeFormRules: {
        status: [
          {
            required: true,
            message: '状态不得为空!',
            trigger: 'change',
          },
        ],
      },
      formButtonCtl: {
        insertButton: false,
        deleteButton: false,
        detailButton: false,
        exportButton: false,
        importButton: false,
      },
      // 性别映射
      sexMap: {
        style: {
          0: 'danger',
          1: 'primary',
        },
        tip: {
          0: '女',
          1: '男',
        },
        filters: [
          { title: '女', name: 0 },
          { title: '男', name: 1 },
        ],
      },
      // 状态映射
      statusMap: {
        style: {
          0: 'primary',
          1: 'danger',
          2: 'warning',
          3: 'danger',
          4: 'success',
        },
        tip: {
          0: '筛选中',
          1: '筛选未通过',
          2: '待面试',
          3: '面试未通过',
          4: '面试通过',
        },
        filters: [
          { title: '筛选中', name: 0 },
          { title: '筛选未通过', name: 1 },
          { title: '待面试', name: 2 },
          { title: '面试未通过', name: 3 },
          { title: '面试通过', name: 4 },
        ],
      },
    }
  },
  created() {
    this.addConfig()
  },
  methods: {
    downloadFile,
    // 获取简历
    getResume(id) {
      this.$store.dispatch('resume/lookOneResume', id).then((response) => {
        this.resumeData = response.data
      })
    },
    // 合并属性
    addConfig() {
      // 下拉框数据注入
      this.$set(this.formList[2], 'optionList', this.statusMap.filters)
      // 表格筛选
      this.$set(this.tableColumns[3], 'filters', this.sexMap.filters)
      // 标签样式
      this.$set(this.tableColumns[3], 'tagStyle', this.sexMap.style)
      // 提示
      this.$set(this.tableColumns[3], 'tipMap', this.sexMap.tip)
      // 表格筛选
      this.$set(this.tableColumns[7], 'filters', this.statusMap.filters)
      // 标签样式
      this.$set(this.tableColumns[7], 'tagStyle', this.statusMap.style)
      // 提示
      this.$set(this.tableColumns[7], 'tipMap', this.statusMap.tip)
    },
    showResume(data) {
      this.viewDialog = true
      this.getResume(data.id)
    },
    // 添加岗位id
    addPostId(data) {
      if (data == undefined) {
        data = {}
      }
      console.log(data)
      data.postId = this.$route.query.postId
      return data
    },
  },
}
</script>

<style lang="scss" scoped>
.sub-el-icon {
  color: currentColor;
  width: 1em;
  height: 1em;
  overflow: hidden;
  fill: currentColor;
  margin-right: 5px;
}
::v-deep .el-dialog {
  .el-dialog__body {
    max-height: 35rem;
    overflow: auto;
    .el-card {
      .el-descriptions {
        .resume-text {
          white-space: pre-wrap;
        }
        .resume-image {
          img {
            width: 2rem;
            height: 2rem;
          }
        }
        .el-descriptions__body {
          .el-descriptions__table {
            width: 100%;
            .el-descriptions-row {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
